<template>
	<view>
		<cu-page-bg></cu-page-bg>
		<view class="cu-w-100">
			<cu-navbar title="成员列表" :placeholder="true" @leftClick="vk.navigateBack()" :showLeft="true"
				:leftIconColor="{color:backgroundStyle.color}" :titleStyle="{color:backgroundStyle.color}"
				:style="getBackgroundStyle" bgColor="rgb(255,255,255,0)"></cu-navbar>
			<view class="cu-w-100 cu-p-20 cu-border-box">
				<cu-card :style="cardStyle">
					<view class="cu-w-100 cu-row cu-font-weight cu-font-big cu-py-20">
						<view style="border-left: 10rpx solid #CCC; margin-right: 20rpx;"></view>
						{{accountBook.accountBookName}}
					</view>
					<view class="cu-w-100 cu-row cu-text-light-muted cu-py-20">{{accountBook.remarks}}</view>
					<view class="cu-w-100 cu-row cu-text-light-muted cu-font-weight cu-py-20">
						<view style="border-left: 6rpx solid #CCC; margin-right: 20rpx;"></view>成员列表
					</view>
					<block v-for="(item,idx) in userRelationBook" :key="idx">
						<view class="cu-w-100 cu-row cu-j-sb cu-py-20 cu-a-center" style="border-bottom-width:1rpx; border-bottom-style:solid; border-bottom-color:#CCC;">
							<view class="cu-span24-18 cu-row cu-a-center">
								<u-avatar :src="item.avatar"></u-avatar>
								<view class="cu-px-20">{{item.nickname}}</view>
								<u-tag :text="isManage(item._id, accountBook.uid) ? '创建者' : '成员'" plain size="mini" shape="circle" 
									:type="isManage(item._id, accountBook.uid) ? 'success' : 'primary'"></u-tag>
							</view>
							<view class="cu-span24-6 cu-row cu-py-20 cu-a-center">
								<u-button v-if="isShowDelBtn(item._id, accountBook.uid)" text="删除" size="mini" icon="trash" iconColor="#FFF" type="error"
									@click="clickCardItem('del', item)">删除</u-button>
							</view>
						</view>
					</block>
					<view class="cu-w-100 cu-row cu-text-light-muted cu-py-20"></view>
					<view class="cu-w-100 cu-row cu-text-light-muted cu-py-20">
						<u-button v-if="accountBook.accountType === '2' || accountBook.accountType === 2" shape="circle" text="邀请好友记账" icon="share" iconColor="#FFF" open-type="share"
							color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
							:customStyle="{width:'100%'}"></u-button>
					</view>
				</cu-card>
			</view>
		</view>
		<u-modal :show="showModal" @close="closeModal" @cancel="closeModal" @confirm="confirmModal" ref="uModal"
			:title="modal.title" :content='modal.content' :zoom="true" :showCancelButton="true"
			:closeOnClickOverlay="true"></u-modal>
	</view>
</template>

<script>
	let vk = uni.vk;
	export default {
		computed: {
			getBackgroundStyle() {
				let style = {};
				style.background = "linear-gradient(45deg, " + this.main + ", " + this.secondary + ")";
				// 合并用户传递的背景色对象
				Object.assign(style, this.backgroundStyle);
				return style;
			}
		},
		data() {
			return {
				main: vk.getVuex('$app.color.main'),
				secondary: vk.getVuex('$app.color.secondary'),
				buttonColor: "linear-gradient(to right, " + vk.getVuex('$app.color.main') + "," + vk.getVuex(
					'$app.color.secondary') + ")",
				backgroundStyle: {
					color: "#FFF"
				},
				cardStyle: {
					"marginTop": "20rpx",
				},
				userInfo: vk.getVuex("$user.userInfo"),
				accountBook: vk.getVuex('$accountbook.accountBook') || {},
				userRelationBook: [],
				enqrDataByPage: vk.getVuex('$userRelationBook.enqrDataByPage'),
				loadMore: {
					status: 'loadmore',
					loadingText: '努力加载中',
					loadmoreText: '上拉加载更多',
					nomoreText: '实在没有了'
				},
				showModal: false,
				modelType:"",
				modal: {
					title: '温馨提示',
					content: '确认退出么？'
				},
				delId:undefined,
			};
		},
		onLoad(options) {
			vk = uni.vk;
			this.init(options);
		},
		// 上拉触底事件
		onReachBottom() {
			if (!this.enqrDataByPage.hasMore) return; // 无更多数据时直接返回
			let that = this
			this.loadMore.status = "loading"
			this.enqrDataByPageFun()
		},
		onShow(){
			this.reloadData();
		},
		onShareAppMessage(res) {
		    if(!(this.accountBook.accountType === "2" || this.accountBook.accountType === 2)) {
				uni.showToast({icon: "error",title: '不是共享账本不能分享',duration: 2000});
				return 
			}
			return {
		      title: this.userInfo.nickname + '邀请你，快来加入【' + this.accountBook.accountBookName + "】一起记账吧！",
		      path: '/pages/index/index?bookId=' + this.accountBook._id
		    }
		},
		methods: {
			// 页面数据初始化函数
			init(options) {
				this.main = vk.getVuex('$app.color.main');
				this.secondary = vk.getVuex('$app.color.secondary');
				// 重置账本数据，进行查询
				this.$store.dispatch('$userRelationBook/clearEnqrData');
			},
			reloadData(){
				// 获取已存在信息
				this.enqrDataByPage = vk.getVuex('$userRelationBook.enqrDataByPage') || null;
				this.userRelationBook = this.enqrDataByPage.data
				// console.log("this.enqrDataByPage",this.enqrDataByPage)
				if (this.enqrDataByPage && (this.enqrDataByPage.data == null || this.enqrDataByPage.data.length == 0)) {
					// 查询账本信息
					this.enqrDataByPageFun()
				}
			},
			async enqrDataByPageFun() {
				let that = this
				const pagination = {
					"pageIndex": vk.getVuex('$userRelationBook.enqrDataByPage.pagination.pageIndex') + 1,
					"pageSize": vk.getVuex('$userRelationBook.enqrDataByPage.pagination.pageSize')
				}
				await vk.callFunction({
					url: 'client/accountbook/kh/enqrUserRelationBook',
					title: '请求中...',
					data: {
						need_user_info: true, // 注意，need_user_info是加在 data 的属性里，而不是与data同级
						pagination: pagination,
						bookId: that.accountBook._id
					},
					success: async (res) => {
						await that.$store.dispatch('$userRelationBook/enqrDataByPage', {res});
						that.enqrDataByPage = vk.getVuex('$userRelationBook.enqrDataByPage') || null;
						that.userRelationBook = that.enqrDataByPage.data || {}
					},
					fail: (err) => {
						const msg = "查询失败-" + err.msg
						vk.alert(msg, "错误提示");
					}
				});
			},
			isManage(_id , uid){
				if(_id === uid) {
					return true
				}
				return false
			},
			isShowDelBtn(_id , uid){
				if(this.accountBook.uid === this.userInfo._id) {
					return true
				}
				else if (_id === this.userInfo._id) {
					return true
				}
				return false	
			},
			clickCardItem(type, data) {
				if (type && type === 'del') {
					// 判断是否是管理员
					let isManageMark = this.isManage(data._id, this.accountBook.uid)
					if (isManageMark) {
						let msg = "如果需要删除创建者-请直接删除账本"
						vk.alert(msg, "错误提示");
						return
					}
					
					this.modelType = "del";
					this.modal.content = "确认删除么？";
					this.showModal = true;
					this.delId = data._id
				}
			},
			closeModal() {
				this.showModal = false;
			},
			confirmModal() {
				if (this.modelType === "del") {
					this.deleUserRelationBook()
				}
				this.showModal = false;
			},
			// 删除关联关系
			async deleUserRelationBook(){
				if(!this.delId) {
					uni.showToast({icon: "error",title: '参数错误',duration: 2000});
				}
				let that = this
				await vk.callFunction({
					url: 'client/accountbook/kh/delUserRelationBook',
					title: '请求中...',
					data: {
						need_user_info: true, // 注意，need_user_info是加在 data 的属性里，而不是与data同级
						_id: that.delId,
						bookId: that.accountBook._id
					},
					success: async (res) => {
						vk.toast("删除成功", "success");
						// 重置进行查询
						that.init()
						that.reloadData()
					},
					fail: (err) => {
						const msg = "删除失败-" + err.msg
						vk.alert(msg, "错误提示");
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>

</style>